.xfd-cell-box {
  margin-bottom: .35rem;
}

.xfd-cell {
  background-color: #FFF;
  position: relative;
  z-index: 5;
  &:after {
    .bottom-line(@line-high-color);
  }
  a.xfd-cell-item,
  label.xfd-cell-item {
    .tap-color(#FFF, .96);
  }
}

.xfd-cell-item {
  display: flex;
  position: relative;
  padding-left: @body-padding-vertical;
  overflow: hidden;
  &:not(:last-child):after {
    margin-left: @body-padding-vertical;
    .bottom-line(@line-color);
  }
}

.xfd-cell-left {
  color: @cell-left-color;
  font-size: @cell-left-fontsize;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.xfd-cell-right {
  flex: 1;
  width: 100%;
  min-height: @cell-height;
  color: @cell-right-color;
  text-align: right;
  font-size: @cell-right-fontsize;
  padding-right: @body-padding-vertical;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  input[type="datetime-local"],
  input[type="date"],
  input[type="time"] {
    line-height: @cell-height;
  }
  input[type="radio"],
  input[type="checkbox"]:not(.xfd-switch) {
    position: absolute;
    left: -9999em;
    & + .xfd-cell-radio-icon:after,
    & + .xfd-cell-checkbox-icon:after {
      font-family: @iconfont-inlay;
      font-size: .44rem;
    }
    & + .xfd-cell-radio-icon:after {
      content: '\e659';
      color: #4CD864;
      display: none;
    }
    & + .xfd-cell-checkbox-icon:after {
      content: '\e658';
      color: #D9D9D9;
    }
    &:checked {
      & + .xfd-cell-radio-icon:after {
        display: inline-block;
      }
      & + .xfd-cell-checkbox-icon:after {
        color: #4CD864;
        content: '\e659';
      }
    }
  }
  &:active {
    background: none; /* for firefox */
  }
  .input-clear,
  .input-password {
    height: @cell-height;
  }
}

.xfd-cell-right {
  input[type="text"]:not(.spinner-input),
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="email"],
  input[type="password"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="time"] {
    flex: 1;
    height: @cell-height;
    border: none;
    font-size: @cell-input-fontsize;
    background: transparent;
    color: @cell-input-color;
    display: flex;
    justify-content: flex-start;
    text-align: left; /* fuck UC */
  }
  select {
    flex: 1;
    height: @cell-height;
    border: none;
    display: block;
    color: @cell-select-color;
    font-size: @cell-select-fontsize;
    margin-left: -.08rem; /* 去除select默认缩进 */
  }
}

.xfd-cell-icon {
  display: block;
  margin-right: .1rem;
  img {
    height: 0.4rem;
  }
}

.xfd-cell-arrow {
  &:after {
    margin-left: .05rem;
    margin-right: -.08rem;
    display: block;
    font-family: @iconfont-inlay;
    font-size: @cell-arrow-fontsize;
    color: @cell-arrow-color;
    content: '\e62e';
  }
}

.cell-title {
  padding: 0 @body-padding-vertical .1rem;
  font-size: @cell-title-fontsize;
  text-align: left;
  color: @cell-title-color;
  position: relative;
  z-index: 1;
  background-color: @body-bg;
  &:after {
    .bottom-line(@line-color, 3);
  }
}